<template>
  <div class="book-mark">
    <div class="bm-box">
      <div class="title">
        <div class="common-title"><em>本地收藏夹</em></div>
      </div>
      <el-input type="textarea" :autosize="autoSizeConfig" v-model="localBM" placeholder="本地收藏夹"></el-input>
      <div class="button-group"><el-button @click="getLocalBM" type="success" plain>读取</el-button></div>
    </div>

    <div class="bm-box">
      <div class="title" style="padding: 30px 0 4px 0">
        <div class="common-title"><em>云端收藏夹</em></div>
      </div>
      <el-input type="textarea" :autosize="autoSizeConfig" v-model="remoteBM" placeholder="云端收藏夹"></el-input>
      <div class="button-group">
        <el-button @click="push" icon="el-icon-upload2" type="success" plain>推送</el-button>
        <el-button @click="getRemoteBM" icon="el-icon-bottom" type="success" plain>拉取</el-button>
        <el-button @click="restoreAndMerge" icon="el-icon-sort" type="success" plain>拉取合并</el-button>
        <el-button @click="restoreOnly" icon="el-icon-download" type="danger" plain>初始化</el-button>
      </div>
    </div>
  </div>
</template>
<script>
var Sendder = chrome.runtime.sendMessage
export default {
  name: 'BookMark',
  data() {
    return {
      localBM: '',
      remoteBM: '',
      code: 'XXXXX',
      autoSizeConfig: { minRows: 5, maxRows: 5 },
    }
  },
  created() {},
  methods: {
    async getLocalBM() {
      const res = await Sendder({ action: 'getLocalBookmark', params: {} })
      this.localBM = JSON.stringify(res)
    },
    async getRemoteBM() {
      const res = await Sendder({ action: 'pullBookMark', params: {} })
      this.remoteBM = res.data.bookmark
    },
    async push() {
      await Sendder({ action: 'pushBookMark', params: {} })
    },
    async restoreOnly() {
      try {
        await this.$confirm('此操作将初始化收藏夹：使用云端版本覆盖到本地，云端暂无数据则推送本地版本。 确定要继续操作吗？', '注意', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'msgbox',
        })
        await Sendder({ action: 'restoreOnly', params: {} })
      } catch (error) {
        console.log(error)
      }
    },
    async restoreAndMerge() {
      await Sendder({ action: 'restoreAndMerge', params: {} })
    },
  },
}
</script>

<style lang="scss" scope>
.book-mark {
  // background: #bbb;
  width: 100%;
  padding: 0 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.bm-box {
  box-sizing: border-box;
  padding: 10px 0 0 0;
}
.title {
  text-align: left;
  padding: 0 0 4px 8px;
}
.button-group {
  padding: 8px 0 0 0;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.common-title {
  font-size: 13px;
  color: #1e1e1e;
  position: relative;
  line-height: 1;
  padding-top: 2px;
  margin-bottom: 6px;
}
.common-title:after {
  position: absolute;
  background-color: #3297ff;
  width: 21px;
  height: 4px;
  border-radius: 2px;
  bottom: -1px;
  left: 1px;
  content: '';
}
.common-title em {
  position: relative;
  z-index: 10;
  font-weight: bold;
  font-style: normal;
}
</style>
